<page-header></page-header>
<div nz-row>
  <div nz-col nzSpan="24">
    <nz-card style="width:100%;">
      <div class="ant-advanced-search-form">
        <div nz-row [nzGutter]="24">
          <div nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label>角色名称</nz-form-label>
              <nz-form-control>
                <input nz-input [(ngModel)]="roleQueryParam.name" placeholder="角色名称"
                       name="roleQueryParam_name"/>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label>角色编号</nz-form-label>
              <nz-form-control>
                <input nz-input [(ngModel)]="roleQueryParam.no" placeholder="角色编号" name="roleQueryParam_no"/>
              </nz-form-control>
            </nz-form-item>
          </div>
          <div nz-col [nzSpan]="8">
            <nz-form-item>
              <nz-form-label>状态</nz-form-label>
              <nz-form-control>
                <nz-select nzAllowClear nzPlaceHolder="选择用户状态" [(ngModel)]="roleQueryParam.activeFlag"
                           name="roleQueryParam_activeFlag">
                  <nz-option nzLabel="可用" [nzValue]="true"></nz-option>
                  <nz-option nzLabel="禁用" [nzValue]="false"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
          </div>
        </div>
        <div nz-row style="margin-bottom: 4px;">
          <div nz-col [nzSpan]="18" style="text-align: left">
            <button nz-button [nzType]="'primary'" (click)="roleSaveShowModal()" >新增</button>
            <button [disabled]="selectRoleInfo == null" nz-button [nzType]="'default'" (click)="roleUpdateShowModal()" >修改</button>
            <button nz-button nzDanger [nzType]="'dashed'" [disabled]="selectRoleInfo == null"
                    nz-popconfirm
                    nzPopconfirmTitle="确定要删除角色吗?"
                    nzPopconfirmPlacement="top"
                    (nzOnConfirm)="confirmRoleDel()" >删除</button>
          </div>

          <div nz-col [nzSpan]="6" style="text-align: right">
            <button nz-button [nzType]="'primary'" (click)="searchRoleList()">查询</button>
            <button nz-button (click)="resetQuery()">重置</button>
          </div>
        </div>
      </div>
      <div class="search-result-list">
        <ng-template #totalTemplate let-total> 共{{ roleInfoTotal }}条</ng-template>
        <nz-table #roleInfoTable
                  nzShowPagination
                  nzShowSizeChanger
                  [nzFrontPagination]='false'
                  [nzShowTotal]="totalTemplate"
                  [nzData]='roleInfoList'
                  [nzTotal]='roleInfoTotal'
                  [(nzPageIndex)]='roleInfoPageNum'
                  [(nzPageSize)]='roleInfoPageSize'
                  (nzPageIndexChange)='roleInfoListPageIndexChange($event)'
                  (nzPageSizeChange)='roleInfoListPageSizeChange($event)'>
          <thead>
          <tr>
            <th>选中</th>
            <th>角色名称</th>
            <th>角色编码</th>
            <th>排序</th>
            <th>状态</th>
            <th>创建时间</th>
          </tr>
          </thead>
          <tbody>
          <tr (click)='onSelectRoleInfoRow(data.id,!data.selected)' *ngFor='let data of roleInfoTable.data'>
            <td nzLeft [nzShowCheckbox]='true' [(nzChecked)]='data.selected'
                (nzCheckedChange)='onSelectRoleInfoRow(data.id,$event)'></td>
            <td>{{ data.name }}</td>
            <td>{{ data.no }}</td>
            <td>{{ data.sortNum }}</td>
            <td>
              <nz-switch [(ngModel)]="data.activeFlag"></nz-switch>
            </td>
            <td>{{ data.createTime | date:'yyyy-MM-dd HH:mm'}}</td>
          </tr>
          </tbody>
        </nz-table>
      </div>
    </nz-card>
  </div>
</div>

<!-- 新增角色 -->
<nz-modal
  [(nzVisible)]="roleSaveModalShowFlag"
  nzTitle="新增角色"
  [nzContent]="roleSaveContent"
  [nzFooter]="roleSaveFooter"
  (nzOnCancel)="roleSaveHandleCancel()">

  <ng-template #roleSaveContent>
    <form nz-form *ngIf="roleSaveParam!=null">

      <nz-form-item>
        <nz-form-label [nzSpan]="7">角色名</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <input nz-input [(ngModel)]="roleSaveParam.name" name="roleSaveParam_username"
                 placeholder="输入用户名"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7">角色编号</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <input nz-input [(ngModel)]="roleSaveParam.no" name="roleSaveParam_no"
                 placeholder="输入角色编号"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7">排序</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <input nz-input type="number" [(ngModel)]="roleSaveParam.sortNum" name="roleSaveParam_sortNum"
                 placeholder="排序"/>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7">状态</nz-form-label>
        <nz-form-control [nzSpan]="12">
          <nz-select name="roleSaveParam_activeFlag" [(ngModel)]="roleSaveParam.activeFlag" nzPlaceHolder="状态">
            <nz-option [nzValue]="true" nzLabel="正常"></nz-option>
            <nz-option [nzValue]="false" nzLabel="禁用"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item>
        <nz-form-label [nzSpan]="7">授权</nz-form-label>
        <nz-form-control [nzSpan]="17">
          <nz-card >
            <!--资源树-->
            <nz-tree
              #roleSaveTree
              nzCheckable
              [nzData]="roleSaveParam.sysResTree"
              (nzClick)="allResTreeClick($event)"
            ></nz-tree>
          </nz-card>
        </nz-form-control>
      </nz-form-item>

    </form>
  </ng-template>

  <ng-template #roleSaveFooter>
    <button nz-button nzType="default" (click)="roleSaveHandleCancel()">取消</button>
    <button nz-button nzType="primary" (click)="roleSaveHandleSave()" [nzLoading]="roleSaveLoading">保存</button>
  </ng-template>
</nz-modal>


